<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
    <title>故障检测与诊断-v1.0</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/loader-style.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/js/iCheck/flat/all.css" >
    <link rel="stylesheet" href="assets/js/iCheck/line/all.css" >
    <link rel="stylesheet" href="assets/js/validate/validate.css" >
    <link rel="stylesheet" href="assets/js/idealform/css/jquery.idealforms.css" >
    <link rel="stylesheet" href="assets/js/dataTable/lib/jquery.dataTables/css/DT_bootstrap.css">
    <link rel="stylesheet" href="assets/js/dataTable/css/datatables.responsive.css">
    <link rel="stylesheet" href="plugins/footable/css/footable.bootstrap.css">
    <link rel="stylesheet" href="plugins/footable/css/footable.bootstrap.min.css">
    <link rel="stylesheet" href="assets/js/footable/css/footable.standalone.css">
    <link rel="stylesheet" href="assets/js/footable/css/footable-demos.css">
    <link rel="stylesheet" href="assets/js/footable/css/footable-demos.css" > 
    <link rel="stylesheet" href="css/custom.css" > 
    <link rel="shortcut icon" href="assets/ico/minus.png">
        
	<link href="css/datepicker3.css" rel="stylesheet">
	<link href="css/styles.css" rel="stylesheet">
    <style>
    	.div select{width:200px;}
		.div select option{width:150px;height:30px;}
    </style>
    
</head>

<body>
  <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>
    <!-- TOP NAVBAR -->
    <script type="text/javascript" src="common/public/header.js"></script>
    <!-- /END OF TOP NAVBAR -->

    <!-- SIDE MENU -->
    <script type="text/javascript" src="common/public/slider.js"></script>
    <!-- END OF SIDE MENU -->

    <!--  PAPER WRAP -->
    <div class="wrap-fluid">
        <div class="container-fluid paper-wrap bevel tlbr">

            <!-- CONTENT -->
            <!--TITLE -->
            <div class="row">
                <div id="paper-top">
                    <div class="col-sm-3">
                        <h2 class="tittle-content-header">
                            <span class="entypo-menu"></span>
                            <span>集群信息</span>
                        </h2>

                    </div>

                    <div class="col-sm-7">
                        <div class="devider-vertical visible-lg"></div>
                        <div class="tittle-middle-header">
                      </div>

                    </div>
                    <div class="col-sm-2">
                        <div class="devider-vertical visible-lg"></div>
                      </div>
                </div>
            </div>
            <!--/ TITLE -->

            <!-- BREADCRUMB -->
            <!-- lxk导航栏 -->
            <ul id="breadcrumb">
                <li>
                    <span class="entypo-home"></span>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">监控</a>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">集群组件监控</a>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">KVStore监控</a>
                </li>
            </ul>

            <!-- END OF BREADCRUMB -->


            <div class="content-wrap">

                        <div class="nest" id="FootableClose">
                            <div class="title-alt">
                              <h6>KVStore监控</h6>
                                <div class="titleClose">
                                    <a class="gone" href="#FootableClose">
                                        <span class="entypo-cancel"></span>
                                    </a>
                                </div>
                                <div class="titleToggle">
                                    <a class="nav-toggle-alt" href="#Footable">
                                        <span class="entypo-up-open"></span>
                                    </a>
                                </div>

                            </div>
                            <!-- 诊断 --> 
							<!-- <div class="col-sm-12">
								<div class="col-xs-12 col-sm-4 text-center">
	
	                                 <ul class="list-group">
	                                     <li class="list-group-item text-left">
	                                         <span class="entypo-user"></span>&nbsp;&nbsp;
	                                     </li>
	                                     <li class="list-group-item text-center">
	                                         <img src="documents/images/cassandra.jpg" alt="" class="img-circle img-responsive img-profile">
	
	                                     </li>
	                                     <li class="list-group-item text-right">
	                                       <button id="searchBtn" type="button" class="btn btn-info">诊断</button>  
	                                     </li>
	                                    
	                                     <li class="list-group-item text-center">
	                                         <span class="pull-left">
	                                             <strong>健康指数</strong>
	                                         </span>
	
	                                     <div class="ratings">
	
	                                         <a href="#">
	                                             <span class="fa fa-star"></span>
	                                         </a>
	                                         <a href="#">
	                                             <span class="fa fa-star"></span>
	                                         </a>
	                                         <a href="#">
	                                             <span class="fa fa-star"></span>
	                                         </a>
	                                         <a href="#">
	                                             <span class="fa fa-star"></span>
	                                         </a>
	                                         <a href="#">
	                                             <span class="fa fa-star-o"></span>
	                                         </a>
	
	                                     </div>
	
	
	                                     </li>
	
	                                     <li class="list-group-item text-right">
	                                         <span class="pull-left">
	                                             <strong>诊断时间</strong>
	                                         </span>2.13.2018
	                                     </li>
	                                    
	                                 </ul>
	
	                           	</div>
                                
                                <div class="col-xs-12 col-sm-8 profile-name">
                                    <h2>诊断详情
                                        <span class="pull-right social-profile">
                                             <i class="entypo-github-circled"></i> 
                                        </span>
                                    </h2>
                                    <hr>

                                    <dl class="dl-horizontal-profile">
                                       <dt>ip</dt>
                                        <dd>192.168.206.134</dd>
                                        <dt>cache</dt>
                                        <dd>normal</dd>

                                        <dt>connections</dt>
                                        <dd>300</dd>

                                        <dt>memeory</dt>
                                        <dd>normal</dd>

                                        <dt>threadpool</dt>
                                        <dd>normal</dd>

                                        <dt>storage</dt>
                                        <dd>normal</dd>
                                    </dl>
                                    <hr>
                                    <h5><span class="entypo-arrows-ccw"></span>&nbsp;&nbsp;Recent Activities</h5>
                                </div>
                           </div><br> -->
                       
                            	<!-- 基础 -->
	                           <div  style="height:100%; min-height:1400px;" class="nest">
	                               	<!-- gragh -->
                               		<div id="cpu_cassandra" class="col-lg-5 col-md-5"></div>
                               		<div id="memory_cassandra" class="col-lg-5 col-md-5"></div><br><br>
	                               	
	                               	<div class="table-responsive  col-lg-12 col-md-12">
										<h4 align="center">KVStore监控基本指标表</h4><br>
			                            <table  id="cassandra_metric" class="table"  data-filtering="true" data-paging="true" >
			                                   <thead>
				                                   <tr>
				                                   		<th>时间</th>
				                                   		<th>KVStore进程</th>
				                                   		<th>主机名称</th>
				                                   		<!-- <th>线程总数</th>
				                                   		<th>活跃线程数</th> -->
				                                   		<th>磁盘大小</th>
				                                   		<th>完成任务数</th>
				                                   		<th>命中数</th>
				                                   		<!-- <th>Thrift协议客户端数</th> -->
				                                   </tr>
			                                   </thead>
			                                   <tbody id="cassandra_metric_body"></tbody>
		                                </table>
	                                </div><br><br>
	                                
	                                <div class="table-responsive  col-lg-12 col-md-12">
	                                	<h4 align="center">KVStore状态信息</h4><br>
			                            <table  id="cassandra_pod" class="table"  data-filtering="true" data-paging="true" >
			                                   <thead>
			                                   		<tr >
				                                   		<th >组件名称</th>
				                                   		<th >状态信息</th>
				                                   </tr>
			                                   </thead>
			                                   <tbody id="cassandra_pod_body"></tbody>
		                                </table>
	                                </div>
	                                
	                            </div>
                                
                                <!-- 之前写的动态表格的模态框 暂时先不用了 -->
                                <!-- 增加表选项的模态框   data-dismiss="modal"-->
                                <!--  
                           	   <div class="modal fade" id="addQuota" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                  <div class="modal-dialog">
                                    <div class="modal-content">
                                      <div class="modal-header">
                                         <button type="button" data-dismiss="modal" class="close"  aria-hidden="true">×</button>
                                         <h4 class="modal-title" id="myModalLabel">SELECT QUOTA</h4>
                                      </div>
                                      
                                      <div class="modal-body">
                                         <div class="body-nest" id="Footable">
                                         <button  id="allQuota" type="button" class="btn btn-info" aria-hidden="true">全选</button>
                                         <button id="inverseQuota" type="button" class="btn btn-info" align="right"  >反选</button>
                                        
                                         <table  id="" align="center" border="0px" data-filtering="true" data-paging="true">
                                             <thead>
                                                <tr>
                                                	<th>QUOTA NAME</th>
                                                	<th></th>
                                                	<th></th>
                                                </tr>
                                                <tr>
                                                </tr>
                                                 
                                             </thead>
                                             <tbody>
                                             	<tr height="50px">
                                                 	<td width="110px"><span><input type="checkbox" name="quota" value="id">&nbsp;&nbsp;&nbsp;
                                                 		<span class="status-metro status-warning">id</span></span></td>
                                                 	<td width="110px"><input type="checkbox" name="quota" value="logtime">&nbsp;&nbsp;&nbsp;
                                                 		<span class="status-metro status-warning">logtime</span></td>
                                                 	<td width="110px"><input type="checkbox" name="quota" value="hostip">&nbsp;&nbsp;&nbsp;
                                                 		<span class="status-metro status-warning">hostip</span></td>
                                                 	<td width="110px"><input type="checkbox" name="quota" value="software">&nbsp;&nbsp;&nbsp;
                                                 		<span class="status-metro status-warning">software</span></td>
                                                </tr>
                                                <tr height="50px">
                                                 	<td width="110px"><span><input type="checkbox" name="quota" value="WeChat5">&nbsp;&nbsp;&nbsp;
                                                 		<span class="status-metro status-warning">WeChat5</span></span></td>
                                                 	<td width="110px"><input type="checkbox" name="quota" value="WeChat6">&nbsp;&nbsp;&nbsp;
                                                 		<span class="status-metro status-warning">WeChat6</span></td>
                                                 	<td width="110px"><input type="checkbox" name="quota" value="WeChat7">&nbsp;&nbsp;&nbsp;
                                                 		<span class="status-metro status-warning">WeChat7</span></td>
                                                 	<td width="110px"><input type="checkbox" name="quota" value="WeChat8">&nbsp;&nbsp;&nbsp;
                                                 		<span class="status-metro status-warning">WeChat8</span></td>
                                                </tr>
                                                <tr height="50px">
                                                 	<td width="110px"><span><input type="checkbox" name="quota" value="WeChat9">&nbsp;&nbsp;&nbsp;
                                                 		<span class="status-metro status-warning">WeChat9</span></span></td>
                                                 	<td width="110px"><input type="checkbox" name="quota" value="WeChat10">&nbsp;&nbsp;&nbsp;
                                                 		<span class="status-metro status-warning">WeChat10</span></td>
                                                 	<td width="110px"><input type="checkbox" name="quota" value="WeChat11">&nbsp;&nbsp;&nbsp;
                                                 		<span class="status-metro status-warning">WeChat11</span></td>
                                                 	<td width="110px"><input type="checkbox" name="quota" value="WeChat12">&nbsp;&nbsp;&nbsp;
                                                 		<span class="status-metro status-warning">WeChat12</span></td>
                                                </tr>
                                             </tbody>
                                            </table>
                                            
                                            
                                         </div>
                                      </div>
		                              <div class="modal-footer">
		                                   <button  class="btn btn-danger" type="button" data-dismiss="modal">CLose</button>
		                                   <button  id="addConfirm" class="btn btn-default" data-dismiss="modal"  type="button"  data-toggle="modal" data-target="#confirmAdd">Confirm</button>
		                              </div>
                                    </div>
                        		  </div>
                     		   </div> 
                     		   -->
                     		    <!-- 确认指标的模态框   -->
                     		    <!-- 
                           	   <div class="modal fade" id="confirmAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                  <div class="modal-dialog">
                                    <div class="modal-content">
                                      <div class="modal-header">
                                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                         <h5 class="modal-title">确认选择以下Cassandra指标信息</h5>
                                      </div>
                                      <div class="modal-body">
                                         <div class="body-nest" >
                                            <label >您选择的指标项为：</label><br><br>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label id="quotaLab"></label>
                                         </div>
                                      </div>
		                              <div class="modal-footer">
		                                   <button  class="btn btn-danger" type="button" data-dismiss="modal">CLose</button>
		                                   <button  id="confirm" class="btn btn-default" type="button" data-dismiss="modal">Confirm</button>
		                              </div>
                                    </div>
                        		  </div>
                     		   </div> 
                            	 
                            	
                               <label id="" align="center"></label>
                               <h4 id="tableName" align="center"></h4><br>
                               -->
                            	<!-- 创建动态表格 -->
                            	<!--  
                               <div id="createTable">
                               		
                               </div>
                               -->
                        </div>
                    
            </div>


            <!-- /END OF CONTENT -->

<!-- 进程搜索模块 -->

            <!-- 进程搜索模块结束 -->

            <!-- FOOTER -->
            <div class="footer-space"></div>
            <div id="footer">
                
            </div>
            <!-- / END OF FOOTER -->


        </div>
    </div>
    <!--  END OF PAPER WRAP -->

    <!-- RIGHT SLIDER CONTENT -->
    

    <!-- END OF RIGHT SLIDER CONTENT-->


   <!-- Le styles -->
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/iCheck/jquery.icheck.js"></script>
    <script type="text/javascript" src="assets/js/switch/bootstrap-switch.js"></script>
   
    <!-- MAIN EFFECT -->
    <script type="text/javascript" src="assets/js/preloader.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="assets/js/load.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
    
    <!--footable相关的js  -->
    <script type="text/javascript" src="plugins/footable/3.1.6/footable.min.js"></script>
	<script type="text/javascript" src="plugins/footable/3.1.6/footable.js"></script>
	
	<!-- 图表插件 -->
	<script type="text/javascript" src="plugins/highcharts/highcharts.js"></script>
	<script src="http://github.highcharts.com/master/modules/no-data-to-display.src.js"></script>
	
	<!--kvStore表数据显示 -->
	<script type="text/javascript" src="common/monitor/kvStoreMonitor.js"></script> 
	
</body>

</html>
